<template>
  <el-card class="box-card">
    <itable
    :table="tconfig.tableConfig"
    :tableData="tconfig.tableData"
    :page-bean="tconfig.pageBean"
    @pageChange="pageChange"
    @handleInfo="handleInfo"
    >
      <template #searchBox>
        <Eform
          :model="form"
          :elem="fromData"
          :submit="true"
          :reset="true"
          :button="false"
          okIcon="Search"
          btnSize="default"
          submitText="搜索"
          @onSuccess="onSuccess"
          @onReset="onReset"
          >
        </Eform>
      </template>

      <template #headerbtn>
        <el-button type="primary" plain @click="childexport" icon="Download">导出</el-button>
      </template>
    </itable>

    <el-drawer
    title="详情"
    v-model="dialogVisible"
    size="30%">
    <el-descriptions :column="1">
      <el-descriptions-item label="员工信息:">{{ info.staff.name }}  {{ info.staff.phone }}</el-descriptions-item>
      <el-descriptions-item label="工作内容:">{{ info.content }} <span>(安全教育 共{{ info.min_view_time??'--' }}秒)</span></el-descriptions-item>
      <el-descriptions-item label="触发时间:">{{ info.created_at }}</el-descriptions-item>
      <!-- <el-descriptions-item label="危险作业详情"><span v-if="info.danger?.length <= 0">-</span></el-descriptions-item> -->
      <template v-if="info.danger?.area">
        <el-descriptions-item label="作业位置:">{{ info.danger.area }}</el-descriptions-item>
        <el-descriptions-item label="作业票图片:"><span v-if="!info.danger.files">-</span></el-descriptions-item>
        <el-descriptions-item v-if="info.danger.files">
          <el-image style="width: 80px; height: 80px; margin-right: 10px;" :preview-src-list="JSON.parse(info.danger.files)" :initial-index="i" v-for="(url, i) in JSON.parse(info.danger.files)" :key="i" :src="url"/>
        </el-descriptions-item>
        <el-descriptions-item label="共同作业人:">{{ info.danger.chaperone }}</el-descriptions-item>
        <el-descriptions-item label="作业种类:">{{ info.danger.typeName }}</el-descriptions-item>
        <el-descriptions-item label="文件:">
          <div v-if="info.danger.files_items.length > 0" v-for="(url, index) in info.danger.files_items" :key="index" style="paddingBottom:10px"><el-link :href="url" >{{ url.substring(url.lastIndexOf('/')+1) }}</el-link></div>
          <span v-else>-</span>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </el-drawer>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { PageBean } from "@/utils/page-bean";
import itable from '@/components/table/table.vue'
import Eform from '@/components/eform/index.vue';
import useCurrentInstance from '@/utils/useCurrentInstance'

const { proxy } = useCurrentInstance()
let dialogVisible = ref(false)
let fromData = reactive([
  {
    label: "员工姓名",
    prop: "staff",
    clearable: true,
  },
  {
    label: "完成时间",
    prop: "time",
    element:'date',
    type:"daterange",
    format:'YYYY-MM-DD',
    clearable: true,
  },
  {
    label: "工作内容筛选",
    prop: "content",
    labelWidth:'120',
    clearable: true,
  }
])
let form = reactive({
  staff:'',
  content:'',
  time:'',
  date:'',
  page:1,
  size:8
})
let info = ref({}) as any
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(8, 1, 0),
})

// 重置
const onReset = () => {
  tconfig.pageBean.pageIndex = 1
  form.date = ''
  getRecordStaff()
}
// 搜索
const onSuccess = () => {
  tconfig.pageBean.pageIndex = 1
  if(form.time){
    form.date = form.time.join()
  }else{
    form.date = ''
  }
  getRecordStaff()
}

// 新增
const childexport = () => {
  proxy.$api.getStaffExport(form).then(res => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel'});
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, 'test')
    } else {
        const href = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = href
        a.download = proxy.$moment().format('YYYY年MM月DD日')+' 员工台账'
        a.click()
        URL.revokeObjectURL(a.href)
    }
  })
}

// 表格-查看
const handleInfo = (a, b, id) => {
  proxy.$api.getrecordStaffDetails({id:b.id}).then(res => {
    info.value = res.result
    dialogVisible.value = true
  })
}

// 分页
const pageChange = () => {
  getRecordStaff()
}
// 员工台账
const getRecordStaff = () => {
  tconfig.tableConfig.loading = true
  form.page = tconfig.pageBean.pageIndex
  proxy.$api.getRecordStaff(form).then(res => {
    tconfig.tableData = res.result.lists
    tconfig.pageBean.Total = res.result.total_rows
    tconfig.tableConfig.loading = false
  }).catch(err => {tconfig.tableConfig.loading = false})
}
getRecordStaff()
// 初始化表格
const initTable = () => {
tconfig.tableConfig = {
  loading: true,
  hasSelect: false,
  hasIndex: true,
  hasOperation: true,
  hasSearch: true,
  hasPage: true,
  headerShowBtn:true,
  tr: [
    {
      label: "员工姓名",
      prop: "staff_name",
    },
    {
      label: "工作内容",
      prop: "content",
    },
    {
      label: "完成时间",
      prop: "created_at",
    }
  ],
  operation:{
    label:'操作',
    width:'130',
    data:[
      { label:'查看', type:'', icon:'Search', Fun:'handleInfo', id: 0 },
    ]
  }
}
}
initTable()
</script>

<style lang='scss' scoped>
:deep(.el-dialog__body){
.el-form>.el-form-item{
  width: 45%;
  margin-bottom: 20px;
  margin-left: 10px;
}
.el-select{
  width: 100%;
}
}
.dialog-footer{
  width: 100%;
  display: flex;
  justify-content: center;
  .el-button{
    width: 90%;
  }
}
</style>
